<template>
  <el-header id="header">
    <el-row type="flex" align="middle" style="height: 100%">
      <el-col :span="3" style="font-weight: 600">客服一站式工作台</el-col>
      <el-col :span="15">
        <div
          class="el-icon-s-unfold toggle-collapse"
          :class="controlCollapse ? 'toggle-rotate' : ''"
          @click="toggleCollapse"
        ></div>
      </el-col>
      <el-col :span="6" class="avatar-area">
        <el-button class="exit-username" plain>退出呼叫账号</el-button>
        <el-badge :value="200" :max="5" style="margin: 10px 15px 0 5px">
          <div class="el-icon-phone-outline"></div>
        </el-badge>
        <el-avatar
          style="vertical-align: middle"
          src="https://avatar-static.segmentfault.com/246/160/2461605313-5f315f954fa2f_huge128"
        ></el-avatar>
        <el-dropdown>
          <span class="el-dropdown-link">
            学而思网校<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">油炸脚指甲</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus"
              >狮子头</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-circle-plus-outline"
              >螺蛳粉</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-check"
              >蚵仔煎</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  props: {
    controlCollapse: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    // 点击按钮，进行菜单的折叠和展开
    toggleCollapse() {
      // 子传父
      this.$emit("updateCollapse", !this.controlCollapse);
    },
  },
};
</script>

<style lang="less" scoped>
#header {
  position: relative;
  z-index: 10;
  color: #333;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .toggle-collapse {
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      // 整个项目中用到了很多同样的颜色，就需要去创建一个公共颜色变量
      color: @baseColor;
    }
  }
  // 旋转
  .toggle-rotate {
    transform: rotate(-180deg);
  }
  // 这种预编译器，写的时候最多不超过三层嵌套
  .avatar-area {
    display: flex;
    padding-left: 35px;
    justify-content: space-evenly;
    align-items: center;
    .exit-username {
      padding: 8px 10px;
      font-size: 13px;
    }
  }
}
</style>
